<template>
    <div class="audio-resource-item__wrapper">
        <el-tag class="p-tag__item" size="mini">{{ resourceIndex }}</el-tag>
        <i class="default-resource-cover__item" />
        <div class="resource-info__group">
            <span
                v-if="setting===false"
                class="resource-name__item"
                @click="setting=true"
            >{{ resourceName }}</span>
            <div v-else class="name-edidor__container">
                <el-input class="name-edidor__input" v-model="setName" size="mini" clearable />
                <el-button size="mini" type="success" @click="onClickSubmitName">确认</el-button>
                <el-button size="mini" type="danger" @click="onClickCancelName">取消</el-button>
            </div>
            <el-progress :percentage="percentage" :stroke-width="3" class="upload-progress__item" />
            <div class="upload-info__group">
                <span
                    class="resource-size__item"
                >{{uploadedSize | numberFormatter(2)}} / {{ resourceSize | numberFormatter(2) }}</span>
            </div>
        </div>
        <i class="delete-icon__btn el-icon-delete" @click="onClickDeleteBtn" />
    </div>
</template>

<script>
import { audioResourceUpdatorAPI } from "@/api/km_archive_audio";

export default {
    props: {
        index: {
            type: Number,
            default: 0,
        },
        resource: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            setting: false,
            setName: this.resource.name,
            rawName: this.resource.name,
        };
    },
    computed: {
        resourceIndex() {
            return `${this.index + 1}p`;
        },
        resourceName() {
            return this.resource.name || "没写名字";
        },
        percentage() {
            // eslint-disable-next-line no-void
            return this.resource.progress === void 0
                ? 100
                : this.resource.progress;
        },
        resourceSize() {
            return this.resource.size || 1024 * 1000;
        },
        uploadedSize() {
            return this.resourceSize * (this.percentage / 100);
        },
    },
    methods: {
        onClickSubmitName() {
            this.setting = false;
            this.$set(this.resource, "name", this.setName);
            // 这里执行修改文件名的操作
            if (this.resource.rid) {
                audioResourceUpdatorAPI(this.resource.rid, {
                    name: this.resource.name,
                    artist: this.resource.artist,
                    mark: this.resource.mark,
                });
            }
        },
        onClickCancelName() {
            this.setting = false;
            this.setName = this.rawName;
        },
        onClickDeleteBtn() {
            // 这里给父组件传出去删除事件, 清除稿件中的音频文件记录
            this.$emit("delete", this.index);
            // 接下来调用接口删除文件
        },
    },
};
</script>

<style lang="scss" scoped>
.audio-resource-item__wrapper {
    margin: 20px 0 20px 30px;
    padding: 10px 0 8px 10px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 0 5px 5px 0;
    border: 1px solid $tagBorderColor;
    cursor: move;
    cursor: -webkit-grabbing;

    .p-tag__item {
        width: 30px;
        text-align: right;
        position: absolute;
        top: -1px;
        right: 100%;
    }

    .default-resource-cover__item {
        width: 50px;
        height: 50px;
        display: block;
        background: url(~@/assets/audioResource.png) 0px no-repeat;
    }

    .resource-info__group {
        width: calc(100% - 50px);
        margin: 0 10px;

        .upload-info__group {
            height: 18px;
            line-height: 18px;
            color: #999;

            .resource-size__item {
                font-size: 12px;
            }
        }
    }

    .delete-icon__btn {
        position: absolute;
        top: 10px;
        right: 30px;
        color: #999;
        font-weight: bolder;
        cursor: pointer;
    }

    .resource-name__item {
        width: 90%;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        font-size: 14px;
    }

    .name-edidor__container {
        width: 90%;
        height: 30px;
        display: flex;

        .name-edidor__input {
            margin-right: 10px;
        }
    }
}
</style>
